<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
<svg>
    <rect></rect>
    <rect></rect>
</svg>

<!--<script src="./../../d3.v5.js"></script>-->
<script src="./../../d3.v3.min.js"></script>
<!--<script src="./../../d3.v5.js"></script>-->
<script>

    function  initData() {

        var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）

        var width = 300;  //画布的宽度
        var height = 300;   //画布的高度

        var svg = d3.select("body")     //选择文档中的body元素
            .append("svg")          //添加一个svg元素
            .attr("width", width)       //设定宽度
            .attr("height", height);    //设定高度

        var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

    }

    function originColumnChart(svg,dataset,rectHeight) {
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x",20)
            .attr("y",function(d,i){
                return i * rectHeight;
            })
            .attr("width",function(d){
                return d;
            })
            .attr("height",rectHeight-2)
            .attr("fill","steelblue");
    }



    // Transverse to longitudinal
    function  transverseToLongitudinal() {
        // PS：横向变纵向？
        // https://blog.csdn.net/qq_31052401/article/details/93786425
        //
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("y",function(d,i){
                return height - d;
            })
            .attr("x",function(d,i){
                return i * rectHeight;
            })
            .attr("height",function(d){
                return d;
            })
            .attr("width",rectHeight-2)
            .attr("fill","steelblue");

    }

    // js class
    class ColumnChart{
        constructor(){
            this.  init()
            // this.play()
        }

         init(){
            //画布大小
            this. width = 400;
             this. height = 400;

            //在 body 里添加一个 SVG 画布
             this. svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

            //画布周边的空白
             this. padding = {left:30, right:30, top:20, bottom:20};

            //定义一个数组
             this. dataset = [10, 20, 30, 40, 33, 24, 12, 5];

            // Uncaught TypeError: Cannot read properties of undefined (reading 'ordinal')
            // at completeColumnChart (绘制矩形.html:93)
            // at 绘制矩形.html:178
            //x轴的比例尺
             this. xScale = d3.scale.ordinal()
                .domain(d3.range(dataset.length))
                .rangeRoundBands([0, width - padding.left - padding.right]);

            //y轴的比例尺
             this. yScale = d3.scale.linear()
                .domain([0,d3.max(dataset)])
                .range([height - padding.top - padding.bottom, 0]);


            //定义x轴
             this. xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom");

            //定义y轴
             this. yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");

            //矩形之间的空白
             this. rectPadding = 4;

            //添加矩形元素
             this. rects = svg.selectAll(".MyRect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("class","MyRect")
                .attr("transform","translate(" + padding.left + "," + padding.top + ")")
                .attr("x", function(d,i){
                    return xScale(i) + rectPadding/2;
                } )
                .attr("y",function(d){
                    return yScale(d);
                })
                .attr("width", xScale.rangeBand() - rectPadding )
                .attr("height", function(d){
                    return height - padding.top - padding.bottom - yScale(d);
                })
                .attr("fill","steelblue");

        }

    }

    //画布大小
    var width = 400;
    var height = 400;

    //在 body 里添加一个 SVG 画布
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    //画布周边的空白
    var padding = {left:30, right:30, top:20, bottom:20};

    //定义一个数组
    var dataset = [10, 20, 30, 40, 33, 24, 12, 5];

    // Uncaught TypeError: Cannot read properties of undefined (reading 'ordinal')
    // at completeColumnChart (绘制矩形.html:93)
    // at 绘制矩形.html:178
    //x轴的比例尺
    var xScale = d3.scale.ordinal()
        .domain(d3.range(dataset.length))
        .rangeRoundBands([0, width - padding.left - padding.right]);

    //y轴的比例尺
    var yScale = d3.scale.linear()
        .domain([0,d3.max(dataset)])
        .range([height - padding.top - padding.bottom, 0]);


    //定义x轴
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");

    //定义y轴
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");

    //矩形之间的空白
    var rectPadding = 4;

    //添加矩形元素
    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        })
        .attr("fill","steelblue");


    // 第8章 完整的柱形图
    // Complete column chart
    function completeColumnChart() {
        // //画布大小
        // var width = 400;
        // var height = 400;
        //
        // //在 body 里添加一个 SVG 画布
        // var svg = d3.select("body")
        //     .append("svg")
        //     .attr("width", width)
        //     .attr("height", height);
        //
        // //画布周边的空白
        // var padding = {left:30, right:30, top:20, bottom:20};
        //
        // //定义一个数组
        // var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
        //
        // // Uncaught TypeError: Cannot read properties of undefined (reading 'ordinal')
        // // at completeColumnChart (绘制矩形.html:93)
        // // at 绘制矩形.html:178
        // //x轴的比例尺
        // var xScale = d3.scale.ordinal()
        //     .domain(d3.range(dataset.length))
        //     .rangeRoundBands([0, width - padding.left - padding.right]);
        //
        // //y轴的比例尺
        // var yScale = d3.scale.linear()
        //     .domain([0,d3.max(dataset)])
        //     .range([height - padding.top - padding.bottom, 0]);
        //
        //
        // //定义x轴
        // var xAxis = d3.svg.axis()
        //     .scale(xScale)
        //     .orient("bottom");
        //
        // //定义y轴
        // var yAxis = d3.svg.axis()
        //     .scale(yScale)
        //     .orient("left");
        //
        // //矩形之间的空白
        // var rectPadding = 4;
        //
        // //添加矩形元素
        // var rects = svg.selectAll(".MyRect")
        //     .data(dataset)
        //     .enter()
        //     .append("rect")
        //     .attr("class","MyRect")
        //     .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        //     .attr("x", function(d,i){
        //         return xScale(i) + rectPadding/2;
        //     } )
        //     .attr("y",function(d){
        //         return yScale(d);
        //     })
        //     .attr("width", xScale.rangeBand() - rectPadding )
        //     .attr("height", function(d){
        //         return height - padding.top - padding.bottom - yScale(d);
        //     })
        //     .attr("fill","steelblue");

        // 添加坐标轴的元素

        addText(svg,dataset)
        //
        //添加x轴
        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
            .call(xAxis);

        //添加y轴
        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate(" + padding.left + "," + padding.top + ")")
            .call(yAxis);

    }
    function addText(svg,dataset) {

        // MyText 这个哪里来的
        //添加文字元素
        var texts = svg.selectAll(".MyText")
        // var texts = svg.selectAll("")
            .data(dataset)
            .enter()
        // enter()
        // 当对应的元素不足时 （ 绑定数据数量 > 对应元素 ），
            // 当对应的元素不足时，通常要添加元素，使之与绑定数据的数量相等。后面通常先跟 append 操作。
            .append("text")
            // 后面是 添加吗 也就是先添加了 .attr("class","MyText")
            // 之后才 selectAll吗
            .attr("class","MyText")
            .attr("transform","translate(" + padding.left + "," + padding.top + ")")
            .attr("x", function(d,i){
                return xScale(i) + rectPadding/2;
            } )
            .attr("y",function(d){
                return yScale(d);
            })
            .attr("dx",function(){
                return (xScale.rangeBand() - rectPadding)/2;
            })
            .attr("dy",function(d){
                return 20;
            })

            .text(function(d){
                // console.log("d")
                // console.log(d)
                // 这里就是那几个 高度的数字
                return d;
                // d 是是什么
            })
            .style({
                "fill":"#FFF",
                "text-anchor":"middle"
            });

    }
    completeColumnChart();
</script>
</body>
</html>